<template>
  <div>
    <con-title :info="topTitle"></con-title>
    <!-- <el-card class="box-card">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
       
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <el-button style="float: right; padding: 3px 0" type="text"
        >操作按钮</el-button
      >
    </el-card> -->
    <el-table :data="groupList" style="width: 100%">
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column prop="groupName" label="群组名称"> </el-table-column>
      <el-table-column prop="nodeNums" label="传感器节点数量"> </el-table-column>
      <el-table-column prop="onlineNums" label="在线设备数量"> </el-table-column>
      <el-table-column prop="cTime" label="创建时间"> </el-table-column>
      <el-table-column  label="操作">
        <template slot-scope="scope">
          <el-button @click="showDialog(scope.row.id,scope.row.groupName)" type="text">重命名</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { $groupList } from "../../api/index.js";
import ConTitle from "../../components/ConTitle.vue";
export default {
  components: { ConTitle },
  // eslint-disable-next-line vue/multi-word-component-names
  name: "group",
  data() {
    return {
      topTitle: {
        type: "设备",
        text: "节点群组",
        msg: "以分组的形式管理节点设备,提供了搜索、添加新的群组、重命名、",
      },
      groupList: [],
    };
  },
  methods: {
    handleClick(value) {
      console.log(value);
      this.query.agreement = value.name;
      this.getgroupList();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.pageSize = val;
      this.query.currPage = 1;
      this.getgroupList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.query.currPage = val;
      this.getgroupList();
    },
    getgroupList() {
      var queryStr = { ...this.query };
      if (this.dateStr != "") {
        queryStr.date = this.dateStr;
      }
      $groupList(queryStr).then((res) => {
        console.log(res);
        this.groupList = res.data.data;
        this.total = res.data.total;
      });
    },
    onSubmit() {
      console.log("submit!");
      this.getgroupList();
    },
  },
  mounted() {
    this.getgroupList();
  },
};
</script>

<style>
</style>